<template>
  <view class="container">
    <CustomNav title="拾光锦汉服体验店"></CustomNav>
    <Search btnTitle="搜索" />

    <view class="content">
      <view class="buzzword">
        <view class="text">热门搜索</view>
        <view class="titleList">
          <view class="title" v-for="(item, index) in buzzword" :key="index">{{
            item
          }}</view>
        </view>
      </view>

      <view class="historyBuzzword">
        <view class="text">
          <view class="left">历史记录</view>
          <van-icon name="delete-o" />
        </view>
        <view class="titleList">
          <view
            class="title"
            v-for="(item, index) in historyBuzzword"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import CustomNav from "@/components/CustomNav/index.vue";
import Search from "@/components/Search/index.vue";
import { getItem, setItem } from "@/utils/localStorage";

// 热词
const buzzword = ref(["唐朝汉服", "配饰", "汉服男装", "大雁塔", "大唐芙蓉园"]);

// 历史记录
const historyBuzzword = ref([
  "唐朝汉服",
  "配饰",
  "汉服男装",
  "大雁塔",
  "大唐芙蓉园",
]);

onMounted(() => {
  historyBuzzword.value = getItem("historyBuzzword");
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #f7f7f7;

  .content {
    padding: 30rpx 40rpx;
    .buzzword,
    .historyBuzzword {
      margin-bottom: 30rpx;
      .text {
        font-size: 36rpx;
        margin-bottom: 15rpx;
        font-weight: 800;
      }
      .titleList {
        padding: 0 30rpx;
        display: flex;
        flex-wrap: wrap;

        .title {
          margin-right: 40rpx;
          font-size: 28rpx;
          margin-bottom: 40rpx;
        }
      }
    }

    .historyBuzzword {
      .text {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
